<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularJS&middot;Hello AngularJS</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
    <style>
        .demo{
            margin-bottom:10px;
            border-top:1px solid #1b926c;
        }
         footer{
             color:#fff;
             background-color: #222;
             border-color: #080808;
             padding-top:60px;
             margin-top:100px;
         }
    </style>
</head>
<body>
<div class="row">
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="../index.html">首页</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="javascript:void(0)">Link</a></li>
                <li><a href="javascript:void(0)">Link2</a></li>
            </ul>
        </div>
    </nav>
</div>
 <div class="container" ng-app="MyAPP">
     <siteheader></siteheader>
     <h3>指令中link,compile,controller属性示例</h3>

     <div ng-controller="MyCtrl">
         <example-directive></example-directive>
     </div>

     <sitefooter></sitefooter>
 </div>
</body>
</html>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.js" type="text/javascript"></script>
<script>
    var app=angular.module("MyAPP",[]);
    //自定义指令，实现link,compile,controller
    app.directive('exampleDirective', function() {
        return {
            restrict: 'E',
            template: '<p>Hello {{number}}!</p>',
            controller: function($scope, $element){
                $scope.number = $scope.number + "22222 ";
            },
            //controllerAs:'myController',
            link: function(scope, el, attr) {
                scope.number = scope.number + "33333 ";
            },
            compile: function(element, attributes) {
                return {
                    pre: function preLink(scope, element, attributes) {
                        scope.number = scope.number + "44444 ";
                    },
                    post: function postLink(scope, element, attributes) {
                        scope.number = scope.number + "55555 ";
                    }
                };
            }
        }
    });
    app.controller('MyCtrl',['$scope',function($scope) {
            $scope.number = '1111 ';
        }
    ]);


    /**
     * 运行结果：
     * Hello 1111 22222 44444 55555 !
     * 由结果可以看出来，controller先运行，compile后运行，link不运行(link就是compile中的postLink)。：
     *
     * 将上例中的compile注释掉运行结果
     * Hello 1111 22222 33333 !
     * 由结果可以看出来，controller先运行，link后运行，link和compile不兼容。compile改变dom,link事件的触发和绑定
     */

    app.directive('siteheader',function(){
        return {
            restrict:"E",
            replace:true,
            templateUrl:"views/header.html"
        }
    });
    app.directive('sitefooter',function(){
        return {
            restrict:"E",
            replace:true,
            templateUrl:"views/footer.html"
        }
    });

</script>